import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { observer } from 'mobx-react-lite';
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
    BreadcrumbEllipsis,
} from '@/components/ui/breadcrumb';
import menuStore from '@/store/menu';

//  可以直观的看到打开的页面的菜单层级，要和菜单结构映射上，打开的页面不一定在菜单上存在，这时需要递归找页面的父级
// 往往是面包屑导航和导航页签二选一使用
// 也可以两者一起使用
export const HeaderBreadcrumb = observer(() => {
    const { pathname } = useLocation();
    const { t } = useTranslation();
    const list = menuStore.getBreadcrumb(pathname);
    if (list.length < 1) return null;
    return (
        <Breadcrumb className='hidden md:flex pl-4'>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink asChild>
                        <Link to='/console' className='hover:text-primary'>
                            仪表盘
                        </Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                {list.length > 2 && (
                    <>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                            <BreadcrumbEllipsis />
                        </BreadcrumbItem>
                    </>
                )}
                {list.slice(-2).map((item: any) => {
                    return (
                        <React.Fragment key={item.id}>
                            <BreadcrumbSeparator />
                            <BreadcrumbItem>
                                {item.pathname && item.pathname !== pathname ? (
                                    <BreadcrumbLink asChild>
                                        <Link to={item.pathname} className='hover:text-primary'>
                                            {item.title || t(item.pathname)}
                                        </Link>
                                    </BreadcrumbLink>
                                ) : (
                                    <BreadcrumbPage>{item.title || t(item.pathname)}</BreadcrumbPage>
                                )}
                            </BreadcrumbItem>
                        </React.Fragment>
                    );
                })}
            </BreadcrumbList>
        </Breadcrumb>
    );
});
